import "../css/orderfrom.scss"
import React, { useEffect, useMemo, useState } from 'react';
import { NavBar, Toast,Modal } from 'antd-mobile';
import { useLocation, useNavigate } from 'react-router-dom';
import { Tabs, BackTop } from '@nutui/nutui-react'
import axios from "axios";
import Orderform_item from "./Orderform_item";
import Orderform_num from "./Orderform_num";
import { Sticky } from '@nutui/nutui-react'
// 订单页面
export default function Orderform() {
  const navigate = useNavigate()
  const back = () => navigate('/show/mine')
 
  let cate = useLocation().search.split("=")[1]
  // 订单的状态
  const [navindex, setnavindex] = useState(cate)
  // 状态列表
  const [navlist] = useState([
    { id: 0, name: "全部" },
    { id: 1, name: "待付款" },
    { id: 2, name: "待发货" },
    { id: 3, name: "待收货" },
    { id: 4, name: "退换货" },
  ])
  // 存放订单数据
  let [orderList, setorderList] = useState([])
  let getorder = async () => {
    let data = await axios.get(`http://127.0.0.1:3000/users/order?cate=${cate}`)
    if (data.data.code == 200) {
      setorderList(data.data.order)
    }
  }
  // 跳转
  let tiao = (ids) => {
    navigate(`/details?ids=${ids}&cate=${cate}`)
  }

  //取消订单
  let delorder = async (ids)=>{
    let data = await axios.delete(`http://127.0.0.1:3000/users/order?ids=${ids}`)
    console.log(data);
    
  }

  useEffect(() => {
    getorder()
  }, [cate])

  return (
    <div style={{ backgroundColor: "#f2f2f2" }}>
       <Sticky threshold={0}>
        <NavBar onBack={back} style={{backgroundColor:"white",width:"100vw"}}>商城订单</NavBar>
      </Sticky>
      
      <Tabs
        value={navindex}
        onChange={(e) => {
          navigate(`/orderform?cate=${e}`)
          setnavindex(e)
        }}
        tabStyle={{ position: 'sticky', top: '0rem', zIndex: 11 }}
      >
        {navlist.map(item => (
          <Tabs.TabPane name={item.id} key={item.id} title={item.name}>
            {orderList.map(item => (
              <div className="orderform_ding" key={item._id}>
                <div className="orderform_items" onClick={() => { tiao(item._id) }}>
                  <Orderform_item info={item.goodsid}></Orderform_item>
                </div>

                <div className="orderform_ding_box">
                  <p>订单号：{item._id}</p>
                  <Orderform_num goodsid={item.goodsid}></Orderform_num>
                </div>
                <div className="orderform_ding_foot" style={{ display: item.state == 1 ? "block" : "none" }}>
                  <button onClick={async () => {
                    const result = await Modal.confirm({
                      content: '确认取消订单',
                    })
                    if (result) {
                      delorder(item._id)
                    } else {
                      Toast.show({ content: '点击了取消', position: 'bottom' })
                    }
                  }}>取消订单</button>
                  <button style={{ borderColor: "#99b97d", color: "#99b97d" }} onClick={()=>{navigate('/orderpay',{state:{id:item._id}})}}>去支付</button>
                </div>
                <div className="orderform_ding_foot" style={{ display: item.state == 2 ? "block" : "none" }}>
                  <button onClick={() => { tiao(item._id) }}>查看订单</button>
                </div>
                <div className="orderform_ding_foot" style={{ display: item.state == 3 ? "block" : "none" }}>
                  <button onClick={() => { tiao(item._id) }}>查看物流</button>
                  <button style={{ borderColor: "#99b97d", color: "#99b97d" }}>确认收货</button>
                </div>
                <div className="orderform_ding_foot" style={{ display: item.state == 4 ? "block" : "none" }}>
                  <button onClick={() => { tiao(item._id) }}>查看物流</button>
                  <button style={{ borderColor: "#99b97d", color: "#99b97d" }}>确认收货</button>
                </div>
                <p className="orderform_p" style={{ display: item.state == 1 ? "block" : "none", color: "#9cb97d" }}>待支付</p>
                <p className="orderform_p" style={{ display: item.state == 2 ? "block" : "none", color: "#9cb97d" }}>待发货</p>
                <p className="orderform_p" style={{ display: item.state == 3 ? "block" : "none", color: "#9cb97d" }}>待收货</p>
                <p className="orderform_p" style={{ display: item.state == 4 ? "block" : "none", color: "#9cb97d" }}>退货中</p>
              </div>
            ))}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <BackTop target="target" />
    </div>
  )
}
